<template>
    <div class="balance_detail">
        <van-nav-bar  title="我的水袋" left-arrow fixed @click-left="onClickLeft" :class="{ scrolled: isScrolled }">
            <!-- <template #title>
                {{'我的水袋'}}
                <img style="width: .36rem;vertical-align: middle;margin-top: -.08rem;"
                    src="../../images/mine/wh_icon.png" alt="" v-if="incomeType.introduce" @click="showPopover=!showPopover">
                <div class="tips" v-if="showPopover">
                    {{ incomeType.introduce }}
                </div>
            </template> -->
        </van-nav-bar>
        <div class="balance_detail_top" @click="showPopover = false">
            <div class="balance_detail_top_left">
                <div>{{ incomeType.balance }}</div>
                <div>{{ incomeType.label }}</div>
            </div>

            <div class="balance_detail_top_right" @click="show=true">转赠</div>
        </div>

        <div class="balance_detail_content" @click="showPopover = false">
            <!--  -->
            <div class="balance_detail_content_day" @click="dayShow = true">{{ days }}<van-icon name="arrow-down"
                    style="color: #999;" /></div>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="balance_list" v-for="(item, index) in fansList" :key="index">
                    <div class="balance_list_left">
                        <div>{{ item.remark }}</div>
                        <div>{{ item.create_time }}</div>
                    </div>
                    <div class="balance_list_right" :style="{ color: item.income == true ? '#55A624' : '#F32A23' }">
                        {{ item.income == true ? '+' : '-' }}{{ item.amount }}</div>
                </div>
            </van-list>
        </div>

        <van-popup v-model="dayShow" position="bottom" :style="{ height: '40%' }">
            <van-datetime-picker :value="new Date(currentDate)" type="date" title="选择年月日" :min-date="minDate"
                :max-date="maxDate" @confirm="onConfirmDay" @cancel="onCancelDay" />
        </van-popup>
        <van-popup v-model="show" position="center" :style="{ height: '8rem', width: '80%' }" round>
            <div class="setp">
                <div class="setp_title">水袋转赠</div>
                <div class="setp_input">
                    <input type="text" @keyup.enter="onSearch" @blur="onSearch" v-model="keyword"
                        placeholder="请输入用户名/ID进行搜索" />
                    <img src="../../images/icon_search.png" alt="">
                </div>
                <div class="setp_list" v-if="teamsList.length > 0">
                    <div v-for="item, index in teamsList" :key="index" class="setp_item">
                        <div class="setp_item_left" v-if="item.avatar_url">
                            <img :src="item.avatar_url" alt="">{{ item.name }}({{ item.account }})
                        </div>
                        <div class="setp_item_left" v-else>
                            <img src="../../images/mine/head.png" alt="">{{ item.name }}({{ item.account }})
                        </div>
                        <!-- <div class="setp_item_right" @click="selectOption(item.uid)">
                            <img v-if="selectedItems.includes(item.uid)" src="../../../images/default-tag-icon.png"
                                alt="">
                            <img v-else src="../../../images/default-circle.png" alt="">
                        </div> -->
                        <div class="setp_item_right" @click="selectOption(item.uid)">
                            <img v-if="selectedItems.includes(item.uid)" src="../../images/default-tag-icon.png"
                                alt="">
                            <img v-else src="../../images/default-circle.png" alt="">
                        </div>
                    </div>
                </div>
                <div style="color: #666;text-align: center;font-size: .24rem;margin-top: 1rem;" v-else>
                    没有更多了
                </div>
                <div class="setp_btn">
                    <div class="setp_input">
                        <input type="text" v-model="amount"
                        placeholder="请输入转赠水袋数量" />
                    </div>
                    <div class="setp_btns">
                        <div class="setp_qx" @click="showClone">取消</div>
                        <div class="setp_qd" @click="submit">确定</div>
                    </div>
               
                </div>
            </div>

        </van-popup>
        <van-popup v-model="showPopup" round closeable @click-close-icon="closeClick" position="bottom"
      class="balance-pay-popup-wrap" :style="{ height: showKeyboard ? '450px' : '250px' }">
      <div class="title">确认支付</div>
      <!-- 交易密码 -->
      <div class="row border-none">
        <span class="desc">请输入支付密码:</span>
      </div>
      <div class="row border-none">
        <van-password-input :value="tradePassword" :focused="showKeyboard"
          @focus="handleShowKeyboard"></van-password-input>
        <van-number-keyboard v-model="tradePassword" :show="showKeyboard" :maxlength="maxlength"
          :hide-on-click-outside="false" @input="onPasswordInput" @delete="onPasswordDelete"
          @blur="showKeyboard = false"></van-number-keyboard>
      </div>
    </van-popup>
    </div>
</template>
<script>
import { parseTime } from '@/tool/methods'
import {
    INCOME_STATISTICS,
    LOG_INCOME_LIST,
    USER_SEARCH,
    TRANSFER_WATER_SUBMIT
} from "@/api/mine";
export default {
    name: 'balance',
    data() {
        return {
            teamsList:[],
            keyword:'',
            days: "本月",
            dayShow: false,
            minDate: new Date(1930, 0, 1),
            maxDate: new Date(2999, 10, 1),
            currentDate: new Date(),
            loading: false,
            finished: false,
            notifyList: [],
            msg: null,
            incomeType: {},
            fansList: [],
            maxlength: 6,
            page: 1,
            year: '',
            month: '',
            day: '',
            pageSize: 20,
            date_range: 1,
            showPopover: false,
            actions: [{ text: '' }],
            isScrolled: false,
            show: false,
            selectedItems:[],
            amount:'',
            showPopup: false,
            tradePassword:'',
            completePassword:'',
            showKeyboard:false

        }
    },
    created() {

    },
    mounted() {
        this.msg = this.$route.query.id
        document.title = '我的水袋'
        this.getIncome()
        window.addEventListener("scroll", this.handleScroll);
        // this.handleFens()
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.handleScroll);

    },
    methods: {
        handleScroll() {
            // console.log(window.scrollY);

            this.isScrolled = window.scrollY > 26;
        },
        getIncome() {
            this.$http.get(INCOME_STATISTICS + 2).then(res => {
                this.incomeType = res.data
                this.actions = [{ text: res.data.introduce }]
            })
        },
        selectOption(index) {
            this.selectedItems = [index];
            // const idx = this.selectedItems.indexOf(index);
            // if (idx === -1) {
            //     // 如果当前选项未被选中，则添加到数组
            //     this.selectedItems.push(index);
            // } else {
            //     // 如果当前选项已被选中，则移除
            //     this.selectedItems.splice(idx, 1);
            // }
            console.log(this.selectedItems);

        },
        onSearch() {
            this.selectedItems = []
            this.handleFens()
        },
        showClone() {
            this.show = false;
            this.keyword = ''
            this.amount=''
            this.selectedItems = []
            this.teamsList = []
        },
        handleFens() {
            let params = {
                page_num: 1,
                page_size: 10,
                key: this.keyword,
            }
            this.$http.get(USER_SEARCH, {
                params: params
            }).then((res) => {
                this.teamsList = res.data
            })
        },
        submit(){
            if (this.selectedItems.length == 0) {
                return this.$toast('请选择')
            }
            if (!this.amount) {
                return this.$toast('请输入转赠水袋数量')
            }
            this.showPopup=true
            // this.$http.post(DATA_AUTH_ADD, {
            //     uid: this.selectedItems[0],
            //     level: this.level

            // }).then(res => {
            //     this.$toast.success(res.message)
            //     this.show = false;
            //     this.keyword = ''
            //     this.selectedItems = []
            //     this.teamsList = []
            //     this.ajaxGoodList()
            // })
        },
        handleShowKeyboard() {
      this.tradePassword = "";
      this.completePassword = false;
      this.showKeyboard = true;
    },
    onPasswordInput(t) {
      (this.tradePassword = (this.tradePassword + t).slice(0, this.maxlength)),
        this.tradePassword.length !== this.maxlength ||
        this.completePassword ||
        ((this.completePassword = !0), this.onSubmit());
    },
    onPasswordDelete() {
      this.tradePassword &&
        ((this.tradePassword = this.tradePassword.slice(
          0,
          this.tradePassword.length - 1
        )),
          (this.completePassword = this.tradePassword.length === this.maxlength));
    },
    closeClick() {
      this.showPopup = false;
      this.tradePassword = "";
      this.completePassword = "";
    },
    onSubmit() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      let params = {
        uid: this.selectedItems[0],
        quantity: this.amount,
        pay_password: this.tradePassword,
      };
      this.$http
        .post(TRANSFER_WATER_SUBMIT, params)
        .then(() => {
          this.loading = false;
          this.showPopup = false;
          this.$toast.success('转赠成功');
          this.selectedItems=[]
          this.amount = "";
          this.pay_password = "";
          this.tradePassword = "";
          this.completePassword = "";
               this.show = false;
                this.keyword = ''
            //     this.selectedItems = []
            //     this.teamsList = []
            this.page = 1
            this.fansList = []
            this.onLoad()
            this.getIncome()
        })
        .catch(() => {
        //   this.loading = false;
        });
    },
        onClickLeft() {
            this.$router.back()
        },
        onConfirmDay(val) {
            this.currentDate = parseTime(val, '{y}-{m}-{d}')
            this.days = this.currentDate
            this.year = this.currentDate.split('-')[0]
            this.month = this.currentDate.split('-')[1]
            this.day = this.currentDate.split('-')[2]
            this.date_range = 0
            this.dayShow = false
            this.page = 1
            this.fansList = []
            this.finished = false
            this.onLoad()
        },
        onCancelDay() {
            this.dayShow = false
            // this.days = null
            this.days = '本月'
            this.year = ''
            this.month = ''
            this.day = ''
            this.page = 1
            this.fansList = []
            this.date_range = 1
            this.finished = false
            this.onLoad()
        },
        onLoad() {
            let params = {};
            params["page_num"] = this.page;
            params["page_size"] = this.pageSize;
            params['type'] = 2;
            params['income_type'] = null;
            params['date_range'] = this.date_range
            params['year'] = this.year;
            params['month'] = this.month;
            params['day'] = this.day;
            // params['status'] = this.active;
            this.$http.get(LOG_INCOME_LIST, {
                params: params
            }).then((res) => {
                const {
                    list
                } = res.data;
                this.total_count = res.data.pages.total_count;
                if (list && list.length) {
                    this.page++;
                    this.fansList = this.fansList.concat(list);

                    // 加载状态结束
                    this.loading = false;
                    if (list.length < this.pageSize) {
                        this.finished = true;
                    }
                } else {
                    this.finished = true;
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.balance_detail {
    padding-top: 46px;
    background-color: #F2F4F5;
    height: calc(100vh - 46px);

    ::v-deep .van-hairline--bottom::after {
        border: none;
    }

    ::v-deep .van-icon {
        color: #fff;
    }

    ::v-deep .van-nav-bar__title {
        width: 150px;
        color: #fff;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }

    ::v-deep .van-nav-bar__text {
        color: #fff;
    }

    ::v-deep .van-nav-bar {
        background: transparent;
        position: fixed; // 改为固定定位
        top: 0; // 添加这行
        left: 0; // 添加这行
        right: 0; // 添加这行
        z-index: 1000; // 添加这行，确保它在其他元素之上

        // position: fixed;
        &.scrolled {
            background-color: #ffffff; // 或者你想要的任何颜色

            .van-nav-bar__title,
            .van-icon,
            .van-nav-bar__text {
                color: #333; // 滚动后变为黑色
            }
        }
    }

    .balance_detail_top {
        width: 100%;
        height: 4.72rem;
        background: url('../../images/mine/img_beij4.png') no-repeat center;
        position: relative;
        /* 相对定位 */
        top: -46px;
        /* 根据你的 NavBar 高度调整，Vant UI 默认 NavBar 高度为 46px */
        width: 100%;
        background-size: cover;
        color: #fff;
        padding-top: 1.5rem;
        display: flex;
        // justify-content: space-between;
        box-sizing: border-box;

        .balance_detail_top_left {
            width: 60%;
            text-align: center;

            div:nth-child(1) {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .6rem;
                color: #FFFFFF;
                line-height: .84rem;
                // text-align: right;
                font-style: normal
            }

            div:nth-child(2) {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .32rem;
                color: #FFFFFF;
                line-height: .44rem;
                // text-align: right;
                font-style: normal;
                margin-top: .12rem;
            }
        }

        .balance_detail_top_right {
            width: 1.64rem;
            height: .72rem;
            margin-left: .4rem;
            background: #FFFFFF;
            border-radius: .4rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .32rem;
            color: #1D69E4;
            line-height: .72rem;
            text-align: center;
            font-style: normal;
            margin-top: .4rem;
        }

    }

    .balance_detail_content {
        width: 95%;
        height: calc(100vh - 4rem);
        margin: 0 auto;
        border-radius: .2rem;
        overflow: auto;
        // border-top-right-radius: .2rem;
        background: #fff;
        padding-top: .4rem;
        box-sizing: border-box;
        margin-top: -1.9rem;
        position: relative;
        z-index: 1;
        padding: .2rem;
        box-sizing: border-box;

        .balance_detail_content_day {
            min-width: 1.2rem;
            max-width: 2rem;
            border-radius: .36rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .24rem;
            color: #666666;
            padding: .08rem 0;
            box-sizing: border-box;
            text-align: center;
            font-style: normal;
            border: 1px solid #8A8A8A;

            ::v-deep .van-icon {
                color: #666;
            }
        }

        .balance_list {
            margin-top: .2rem;
            padding-bottom: .2rem;
            border-bottom: 1px solid #E5E5E5;
            display: flex;
            justify-content: space-between;

            .balance_list_left {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .28rem;
                color: #333333;
                line-height: .4rem;
                // text-align: left;
                font-style: normal;

                div:last-child {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: .24rem;
                    color: #999999;
                    line-height: .34rem;
                    // text-align: left;
                    font-style: normal;
                    margin-top: .12rem;

                }
            }

            .balance_list_right {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .32rem;
                color: #55A624;
                line-height: .44rem;
                // text-align: center;
                font-style: normal;
            }
        }

    }
}

.tips {
    width: 50%;
    min-height: auto;
    max-height: 2rem;
    overflow: auto;
    position: absolute;
    left: 30%;
    top: 90%;
    background: #333;
    white-space: wrap;
    border-radius: .1rem;
    text-align: left;
    padding: .1rem;
    font-size: .28rem;
    font-weight: 400;
}

.tips::after {
    content: '';
    position: absolute;
    left: 50%;
    /* 使三角形居中 */
    bottom: 100%;
    /* 放置在 tips 的上方 */
    margin-left: -0.1rem;
    /* 调整位置，使三角形居中 */
    border-width: 0.1rem;
    /* 设置三角形的大小 */
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    /* 三角形颜色 */
}
.setp {
        width: 95%;
        margin: 0 auto;

        .setp_title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: .32rem;
            color: #333333;
            // line-height: 22px;
            text-align: center;
            font-style: normal;
            padding-top: .32rem;
        }

        .auth_tips {
            padding: .28rem .2rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .28rem;
            color: #333333;
        }

        .setp_input {
            width: 100%;
            height: .64rem;
            display: flex;
            align-items: center;
            position: relative;
            background: #F2F4F5;
            border-radius: .42rem;
            margin-top: .34rem;
            box-sizing: border-box;

            input {
                width: 100%;
                height: 100%;
                background-color: #F2F4F5;
                border: none;
                border-radius: .42rem;
                font-size: .28rem;
                text-indent: .3rem;
            }

            img {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0.2rem;
                width: .32rem;
                height: .32rem;
            }
        }

        .setp_btn {
            width: 100%;
            height: 2rem;
            position: fixed;
            left: 0;
            bottom: 0.3rem;
            background: #fff;
            box-sizing: border-box;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            line-height: .8rem;
            text-align: center;
            font-style: normal;
            padding-top: .2rem;
            .setp_input{
                width: 95%;
                margin: 0 auto;
                border-radius: .12rem;
                margin-bottom: .2rem;
            }
            .setp_btns{
                display: flex;
                justify-content: space-around;
                .setp_qx {
                width: 40%;
                height: .8rem;
                background: #FFFFFF;
                border-radius: .4rem;
                border: 1px solid #E3E3E3;
                font-size: .32rem;
                color: #333333;
            }

            .setp_qd {
                width: 40%;
                height: .8rem;
                background: linear-gradient(90deg, #4A89EC 0%, #1261E2 100%);
                border-radius: .4rem;
                // border: 1px solid #E3E3E3;
                font-size: .32rem;
                color: #FFFFFF;
            }
            }

        }
    }

    .setp_list {
        height: 3.3rem;
        overflow: auto;
        margin-top: .4rem;

        .setp_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: .24rem;

            .setp_item_left {
                display: flex;
                align-items: center;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .24rem;
                color: #333333;
                // line-height: 17px;
                text-align: left;
                font-style: normal;

                img {
                    width: .56rem;
                    height: .56rem;
                    margin-right: .16rem;
                    // border-radius: .56rem;
                }
            }

            .setp_item_right {
                img {
                    width: .32rem;
                }
            }
        }
    }
    .balance-pay-popup-wrap {
  display: flex;
  -webkit-box-orient: vertical;
  flex-direction: column;
  text-align: center;
  padding: 0.32rem;
  box-sizing: border-box;

  .title {
    color: #1b1b1b;
    font-size: 0.36rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
  }

  .row {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #ebedf0;

    &.border-none {
      border: none;
    }
  }

  .van-password-input {
    width: 100%;
    margin: 0;
  }
}
</style>